<template>
  <transition name="fade">
    <div id="PopupsBox" v-if="popupsShow" @click="popupsShow = false">
      <div class="PopupsBox" @click.stop>
        <tactic-box :data="tactic" heroe popup @jump="jump"></tactic-box>
      </div>
    </div>
  </transition>
</template>

<script>
import TacticBox from "@/components/TacticBox/TacticBox.vue";
export default {
  components: {
    TacticBox,
  },
  data() {
    return {
      popupsShow: false,
      tactic: null,
      callback: null,
    };
  },
  methods: {
    show(tactic, callback) {
      this.tactic = tactic;
      this.popupsShow = true;
      this.callback = callback;
    },
    jump(path) {
      this.popupsShow = false;
      this.callback && this.callback(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
#PopupsBox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .PopupsBox {
    width: 3.1rem;
    background: #fff;
    border-radius: 0.05rem;
    box-sizing: border-box;
    // padding: 0.07rem;
    ::v-deep {
      .tactic-box {
        background: #fff;
        .name {
          .type {
            .item {
              border: 1px solid #ebebeb;
            }
          }
        }
      }
    }
  }
}
</style>
